import { ref, onMounted } from "vue";

type OptionValue = string | number;

/** Select 需要的数据格式 */
interface SelectOption {
    value: OptionValue;
    label: string;
    disabled?: boolean;
}

/** 接口响应格式 */
type ApiData = ApiResponseData<SelectOption[]>;

/** 入参格式，暂时只需要传递 api 函数即可 */
interface FetchSelectProps {
    api: () => Promise<ApiData>;
}

export function useFetchSelect(props: FetchSelectProps) {
    const { api } = props;

    const loading = ref<boolean>(false);
    const options = ref<SelectOption[]>([]);
    const value = ref<OptionValue>("");

    /** 调用接口获取数据 */
    const loadData = () => {
        loading.value = true;
        options.value = [];
        api()
            .then((res) => {
                options.value = res.data;
            })
            .finally(() => {
                loading.value = false;
            });
    };

    onMounted(() => {
        loadData();
    });

    return {
        loading,
        options,
        value
    };
}
